<template>
  <div class="dashboard">
    <!-- 概览卡片 -->
    <div class="stats">
      <el-card v-for="item in statsData" :key="item.label" class="stat-card">
        <div class="icon">
          <i :class="item.icon"></i>
        </div>
        <div class="info">
          <p class="label">{{ item.label }}</p>
          <p class="value">{{ item.value }}</p>
        </div>
      </el-card>
    </div>

    <!-- 趋势图 -->
    <div class="chart-section">
      <el-card>
        <h3>近7天文章发布量</h3>
        <canvas id="articleChart"></canvas>
      </el-card>
    </div>

    <!-- 最新动态 -->
    <div class="latest-section">
      <el-card>
        <h3>最新文章</h3>
        <ul>
          <li v-for="post in latestPosts" :key="post.id">
            <strong>{{ post.title }}</strong> — {{ post.author }}（{{ post.date }}）
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElCard } from 'element-plus'

const statsData = ref([
  { label: '用户总数', value: 1289, icon: 'fas fa-users' },
  { label: '文章数', value: 320, icon: 'fas fa-file-alt' },
  { label: '评论数', value: 870, icon: 'fas fa-comments' },
  { label: '今日新增', value: 25, icon: 'fas fa-chart-line' }
])

const latestPosts = ref([
  { id: 1, title: 'Vue3 响应式原理详解', author: 'Alice', date: '2025-10-17' },
  { id: 2, title: '如何设计高性能接口', author: 'Bob', date: '2025-10-16' },
  { id: 3, title: 'Element Plus 实战指南', author: 'Charlie', date: '2025-10-15' },
])

// 初始化图表
onMounted(() => {
  const ctx = document.getElementById('articleChart') as HTMLCanvasElement
})
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card .icon i {
  font-size: 30px;
  color: #fc5531;
}

.stat-card .info .label {
  font-size: 14px;
  color: #666;
}

.stat-card .info .value {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.chart-section,
.latest-section {
  background: #fff;
}
.latest-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.latest-section li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style>
